import {
  Component,
  Emit,
  Prop,
  Setup,
  toNative,
  TSX,
  Vue,
  Watch
} from 'vue-facing-decorator'

import { useMainStore } from '@/store'

import render from './HelloWorldClass.render'

interface Props {
  /**
   * 消息
   */
  msg?: string
}

interface Events {
  mounted: (msg: string) => void
}

@Component({
  name: 'HelloWorldClass',
  render
})
class HelloWordClass extends TSX<Props, Events>()(Vue) {
  @Prop({
    required: true
  })
  msg!: string

  count = 0

  @Setup(() => useMainStore())
  mainStore!: ReturnType<typeof useMainStore>

  get contentComputed() {
    return this.mainStore.content
  }

  @Emit('mounted')
  mountedTrigger() {
    return 'Mounted: HelloWordClass'
  }

  @Watch('count', {
    deep: false,
    immediate: false
  })
  countWatcher(newValue: number, oldValue: number) {
    console.log('count: ', newValue)
  }

  handleCount() {
    this.count++
  }

  clear() {
    this.count = 0
  }

  mounted() {
    this.mountedTrigger()
  }
}

export default toNative(HelloWordClass)
